import React from 'react';
import { Table } from 'antd';
import moment from 'moment';
import enums from '@/enums';
import Area from '../../Form/Area/Area';
import { useOperationLogList } from '../../hooks';

/**
 * 操作日志
 */
function OperationLogArea(props) {
    const { id } = props;

    const operationLogList = useOperationLogList({ resourceId: id });

    return (
        <Area title="操作日志">
            <Table
                rowKey="subId"
                scroll={{ x: 'max-content' }}
                columns={[
                    {
                        title: '操作人',
                        dataIndex: 'operator',
                        render: (text) => text ?? '-',
                    },
                    {
                        title: '操作类型',
                        dataIndex: 'operatorCode',
                        render: (value) => enums.ossAcceptance.operationLogTypes.get(value),
                    },
                    {
                        title: '操作时间',
                        dataIndex: 'operateTime',
                        render: (text) => (moment(text).isValid() ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-'),
                    },
                ]}
                {...operationLogList.tableProps}
                pagination={{
                    showSizeChanger: true,
                    showTotal: (total) => `共 ${total} 条`,
                    ...operationLogList.tableProps.pagination,
                }}
            />
        </Area>
    );
}

export default OperationLogArea;
